<template>
  <base-module
    class="personnel-info-comp"
    :title="title"
    @icon-click="handleClick"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <histogram :options="options"></histogram>
  </base-module>
</template>

<script>
import BaseModule from '@/components/public/BaseModule';
import Histogram from '../echarts/base';

// 人员情况
export default {
  name: 'productionComp',
  props: {
    title: {
      type: [Object, String],
      default: '产值进度'
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      progressData: []
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
    options() {
      return {
        legend: {
          data: this.echartsData.legend,
          textStyle: {
            color: '#fff'
          },
          right: 30
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          bottom: 20
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: 'rgb(85,201,246)'
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgb(85,201,246)'
            }
          },
          data: this.echartsData.xAxisData,
        },
        yAxis: {
          type: 'value',
          // 轴线
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgb(85,201,246)'
            }
          },
          axisLabel: {
            color: 'rgb(85,201,246)'
          }
        },
        series: this.echartsData.series,
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            // end: 50,
            minValueSpan: 5,
            // maxValueSpan: 5,
            zoomLock: false
          }
        ]
      };
    },
    echartsData() {
      const result = {
        legend: ['计划产值', '实际产值'],
        xAxisData: [],
        series: []
      };
      const setConfig = (name, colorList = [], list = []) => {
        return {
          name,
          type: 'bar',
          barWidth: 10,
          data: list,
          label: {
            position: 'top',
            show: true,
            color: colorList[0] || 'rgb(85, 201, 246)'
          },
          itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                {
                  offset: 0,
                  color: colorList[0] || 'rgb(85, 201, 246)'
                },
                {
                  offset: 1,
                  color: colorList[1] || 'rgba(85, 201, 246, 0.3)'
                }
              ]
            )
          }
        };
      };
      const planData = [];
      const actualData = [];
      this.progressData.forEach(item => {
        const { actualOut, planOut, monthOut } = item;
        // 设置横轴
        result.xAxisData.push(monthOut);
        // 设置数据
        planData.push(planOut);
        actualData.push(actualOut);
      });
      result.series.push(setConfig(result.legend[0], [], planData));
      result.series.push(setConfig(
        result.legend[1],
        ['rgb(246, 152, 63)', 'rgba(246, 152, 63, 0.3)'],
        actualData
      ));
      return result;
    },
  },
  created() {
    this.getProgressOut();
  },
  components: {
    Histogram,
    BaseModule
  },
  methods: {
    async getProgressOut() {
      const { success, data: { data }} = await this.$Model.getProgressOut({
        projectId: this.projectId,
      });
      if (success && data) {
        const { pageInfo } = data;
        if (pageInfo) {
          this.progressData = pageInfo.list || [];
        }
      }
    },
    handleClick() {
      this.$router.push('/progress/output');
    }
  }
};
</script>

<style lang="scss" scoped>
  .personnel-info-comp {
    width: 100%;
    height: 100%;
  }
</style>
